<!-- components/checkbox.vue -->
<template>
  <!-- 使用 view 模拟 label，避免 label 在小程序中失效 -->
  <view class="custom-checkbox-wrapper" @click="handleClick">
    <!-- 隐藏原生 checkbox -->
    <input
      type="checkbox"
      :checked="props.modelValue"
      @change="handleChange"
      class="native-checkbox"
    />
    <!-- 自定义外观 -->
    <view
      class="custom-icon"
      :class="{ checked: props.modelValue }"
      
    >
      <!-- 小圆点，仅在选中时显示 -->
      <view
        v-if="props.modelValue"
        class="inner-dot"
        :style="{ backgroundColor: props.activeColor }"
      ></view>
    </view>
  </view>
</template>

<script setup>

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  activeColor: {
    type: String,
    default: '#1a195a'
  }
})

const emit = defineEmits(['update:modelValue'])

// 🔴 核心：点击 wrapper 触发切换
const handleClick = (e) => {
  // 阻止事件冒泡，避免影响父级
  e.stopPropagation()
  // 发出更新事件，值取反
  emit('update:modelValue', !props.modelValue)
}

// 🔵 可选：保留原生 change 事件作为备用
const handleChange = (e) => {
  emit('update:modelValue', e.target.checked)
}
</script>

<style scoped>
.custom-checkbox-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  /* 增大点击热区 */
  padding: 10rpx;
  margin: -10rpx;
}

.native-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.custom-icon {
  width: 60rpx;
  height: 60rpx;
  border: 2px solid #979797;
  color:#979797;
  background: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
}

/* .custom-icon.checked {
  border-color: v-bind('props.activeColor');
} */

.inner-dot {
  width: 30rpx;
  height: 30rpx;
  background-color: v-bind('props.activeColor');
  border-radius: 50%;
}
</style>